<template>
  <div class="product">
    <div class="banner">
      <ul class="banner-right">
        <li class="recommend-name wow bounceInDown" data-wow-duration="1s">
          {{ recommend.name }}
        </li>
        <li class="recommend-desc wow bounceInLeft" data-wow-duration="1s">
          {{ recommend.desc }}
        </li>
        <li class="recommend-price wow bounceInLeft" data-wow-duration="1s">
          ￥{{ recommend.price }}
        </li>
        <li class="recommend-btn wow bounceInRight" data-wow-duration="1s">
          <button class="primary-button" @click="toRecommend(recommend.id)">
            查看详情
          </button>
        </li>
      </ul>
      <div class="banner-left">
        <img
          v-if="recommend.s_goods_photos"
          :src="recommend.s_goods_photos[0].path"
          alt=""
        />
      </div>
    </div>
    <div class="product-con">
      <div class="product-classify">
        <p class="title">分类</p>
        <el-tree
          class="type-list"
          :data="classify"
          :props="defaultProps"
          node-key="id"
          :default-expanded-keys="defExpanded"
          :default-checked-keys="defChecked"
          accordion
          @node-click="handleNodeClick"
        ></el-tree>
      </div>
      <div class="product-list">
        <p class="title">商品列表</p>
        <el-breadcrumb
          separator-class="el-icon-arrow-right"
          class="product-title"
        >
          <el-breadcrumb-item>全部</el-breadcrumb-item>
          <el-breadcrumb-item v-for="item in breadcrumb" :key="item.key">{{
            item.name
          }}</el-breadcrumb-item>
        </el-breadcrumb>
        <ul class="list-container">
          <GoodSingle
            v-for="item in goods"
            :item="item"
            :key="item.id"
          ></GoodSingle>
        </ul>
        <div class="page">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper "
            :total="totalPage"
            @size-change="handleSizeChange"
            :page-sizes="[4, 8]"
            :page-size="pageSize"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getGoods, getType } from "@/assets/request";
import GoodSingle from "@/components/GoodSingle.vue";
export default {
  name: "Product",
  data() {
    return {
      goods: [],
      totalPage: 100,
      classify: [
        {
          id: 0,
          label: "全部",
          children: [],
        },
      ],
      breadcrumb: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      defChecked: [],
      defExpanded: [],
      pageSize: 4,
      pageCurrent: 1,
      classifyId: 0,
      recommend: {},
      recommendIndex: 0,
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getGoods();
    },
    handleCurrentChange(val) {
      this.pageCurrent = val;
      this.getGoods();
    },
    async handleNodeClick(el) {
      this.classifyId = el.id;
      this.getGoods();
      this.getBreadCrumb(el);
    },
    getBreadCrumb(el) {
      if (!el.parent_id) {
        this.breadcrumb = [el];
      } else if (this.breadcrumb.indexOf(el) >= 0) {
        return;
      } else {
        this.breadcrumb.push(el);
      }
    },
    async getGoods() {
      const goodsInfo = {
        page: this.pageCurrent,
        limit: this.pageSize,
      };
      goodsInfo.classify_id = this.classifyId || "";
      const resGoods = await getGoods(goodsInfo);
      this.goods = resGoods.data.result.rows;
      this.getTotalPage(resGoods.data.result.count);
      this.getRecommend();
    },
    getTotalPage(totalCount) {
      this.totalPage = totalCount;
    },
    getRecommend() {
      this.recommend = this.goods[3];
    },
    toRecommend(id) {
      this.$router.push({
        name: "detail",
        params: {
          id: id,
        },
      });
    },
  },
  components: {
    GoodSingle,
  },
  created() {},
  async mounted() {
    this.$nextTick(() => {
      new this.$wow.WOW().init();
    });
    const resClassify = await getType();
    this.classify = this.classify.concat(resClassify.data.result);
    this.getGoods();
    if (this.$route.params.moreToProductId) {
      this.defChecked.push(this.$route.params.moreToProductId);
      this.defExpanded.push(this.$route.params.moreToProductId);
    }
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/style/coverBtn.scss";
.product {
  .banner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1200px;
    height: 470px;
    margin: 0 auto;
    margin-bottom: 30px;
    border-bottom: 5px solid #cdcdcd;
    .banner-right {
      display: flex;
      flex-direction: column;
      // justify-content: center;
      align-items: end;
      width: 400px;
      height: 100%;
      li {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-bottom: 20px;
      }
      .recommend-name {
        font-size: 36px;
        margin-top: 150px;
      }
      .recommend-desc {
        font-size: 20px;
      }
      .recommend-price {
        font-size: 36px;
      }
      .recommend-btn {
        button {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 250px;
          height: 50px;
          font-size: 24px;
        }
      }
    }
    .banner-left {
      display: flex;
      justify-content: center;
      width: 470px;
      height: 470px;
      margin-left: 30px;
      img {
        width: 470px;
        height: 470px;
      }
    }
  }
  .product-con {
    display: flex;
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    margin-bottom: 200px;
    .title {
      padding: 20px 0;
      font-size: 16px;
    }
    .product-classify {
      width: 200px;
      .type-list {
        width: 200px;
      }
    }
    .product-list {
      margin-left: 20px;
      .product-title {
        padding: 10px 0;
      }
      .list-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
        height: 100%;
      }
      .page {
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>
